<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 31401
  Date: 2024/6/24
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${menu1.typeName}</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 确保 padding 不会影响宽度计算 */
        }
        .banner {
            text-align: center;
            padding-bottom: 100px; /* 根据 footer 高度调整 */
            /* 如果 .banner 内的图片或内容是浮动的，可以添加以下样式 */
            overflow: auto; /* 清除浮动 */
        }
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 275px;
            height: 275px;
            border:0px solid #cccccc;
            position: relative;
            float: left;
            margin-top: 30px;
            margin-left: 50px;
            margin-right: 0px;
            margin-bottom: 25px;
        }
        .box .pic {
            width: 100%;
            height: 100%;

        }
        .box .icon{
            position: absolute;
            left:7px;
            bottom:7px;
        }

        .box .greenicon{
            display: none;
        }

        .box:hover .greenicon{
            display: block;
        }

        .box p{
            position: absolute;
            left:0;
            top:0;
            color:black;
            padding:7px 5px;
            display: none;
        }
        .box:hover p{
            display: block;
        }
        .box:hover .pic{
            opacity: 0.5; /* 半透明图片属性*/
        }
        a{
            color: #000; /* 链接颜色设为黑色 */
            text-decoration: none; /* 去除下划线 */
            padding: 5px 10px; /* 内边距 */
            display: inline-block; /* 作为内联块级元素显示，以便应用内边距和背景色等 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease; /* 背景色过渡效果 */
        }
        a:hover{
            background-color: lightyellow; /* 鼠标悬停时背景色变为浅灰色 */
        }
    </style>
</head>
<body>
<jsp:include page="indexHeader.jsp"></jsp:include>
<span>${menu1.typeName}</span>
    <div class="banner">
        <c:forEach items="${menuGoodslist}" var="mg">
            <div class="box">
                <img src=".${mg.coverImg}" alt="${mg.goodsName}" width="100%" height="100%" class="pic">
                <a href="GoodsDetailServlet?goodsId=${mg.goodsId}" class="icon greenicon">查看详情</a>
                <p>
                    <span>${mg.goodsIntro}</span>
                </p>
            </div>
        </c:forEach>
    </div>
<jsp:include page="indexFooter.jsp"></jsp:include>
</body>
</html>
